<template>
  <el-container style="height: 100%;">
    <Header />
    <el-main>
      <TopBannerView/>

      <custom-caption class="custom_caption" top="padding-top: 5.68rem;" title="科技研发，满足您对业务的所有构想" content="专业的技术团队促进平台的可持续发展" />
      <el-row class="introduction">
        <introduction />
      </el-row>

      <custom-caption top="padding-top: 5rem;margin-bottom: 3rem;" title="平台四大服务" content="兢兢业业的价值观是翔盛悦为您带来的一份承诺函" />
      <el-row class="service">
        <service />
      </el-row>

      <el-row class="find_more" style="padding-top: 5rem">
        <custom-caption textStyle="color: white !important;" title="功能多样满足您的所有需求" content="需求万变，努力不变" />

        <find-more />
      </el-row>

      <custom-caption top="padding-top: 5.36rem;" title="企业风采" content="依法经营是企业生存发展的前提,诚信是走向成功的基础" />
      <el-row class="corporate_style">
        <corporate-style style="margin-top: 4.68rem" />
      </el-row>

      <custom-caption top="padding-top: 3.8rem; background-color: #fff" title="合作伙伴" content="cooperation" />
      <el-row class="partner" style="padding-bottom: 5.36rem;">
        <partner style="margin-top: 4.68rem;" />
      </el-row>

      <Footer/>
    </el-main>

  </el-container>
</template>

<script>
import Header from "../../components/header/Header";
import TopBannerView from "../../components/TopBannerView";
import CustomCaption from "../../components/CustomCaption";
import Introduction from "./components/Introduction";
import Service from "./components/Service";
import FindMore from "./components/FindMore";
import CorporateStyle from "./components/CorporateStyle";
import Partner from "./components/Partner";
import Footer from "../../components/footer/Footer";
export default {
  name: "home",
  components: {
    Header,
    TopBannerView,
    CustomCaption,
    Introduction,
    Service,
    FindMore,
    Partner,
    CorporateStyle,
    Footer
    // "v-bottom": bottom
  },
  data() {
    return {};
  },
  created() {},
  mounted() {},
  methods: {
  }
};
</script>

<style scoped lang="scss">

.el-main {
  padding: 0 !important;
  margin: 0 !important;
  text-align: center;
  overflow: hidden;
}

.introduction {
  /*padding: 0 200px;*/
  background-color: white;
}
.custom_caption {
  background-color: white;
  padding-bottom: 159px;
}
.introduction,
.service,
.corporate_style,
.partner {
  width: 100%;
}

.service {
  width: 100%;
  /*margin: 0 8rem;*/
  background: url('../../assets/image/home/service_bg.png') no-repeat;
  background-size: 100% 100%;
}

.find_more {
  width: 100%;
  background-image: url("../../assets/image/home/find_more_bg.png");
  /*min-height: 660px;*/
  background-size: 100% 100%;
  color: white !important;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.corporate_style {
  padding-bottom: 3.8rem;
}

.partner {
  background-color: white;
}

/**
移动端样式
 */
@media screen and (max-width: $mobile_width) {
  .introduction {
    padding: 0 !important;

  }
  .custom_caption {
    padding-bottom: 45px;
  }

  .service {
    height: 572px;
    /*padding: 24px !important;*/
    background: url('../../assets/image/home/service_bg_m.png') no-repeat;
    background-size: 100% 100%;
  }

  .find_more {
    background-image: url("../../assets/image/home/find_more_bg_m.png");
  }
}

</style>
